<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
  </style>
</head>

<body>
  <h1>请求游戏信息</h1>
  <form id="form" action="" method="">
    <input id="ipt" type="text">
    <button id="btn">点击获取游戏信息</button>
  </form>
  <ul id="ul"></ul>

  <script>
    // 获取元素
    const Oform = document.getElementById('form')
    const Oipt = document.getElementById('ipt')
    const Obtn = document.getElementById('btn')
    const ulNode = document.getElementById('ul')

    // 绑定事件
    Oform.onsubmit = () => {
      // 获取输入框的内容
      const gameId = Oipt.value
      // 创建ajax实例
      const xhr = new XMLHttpRequest()
      // 打开
      // xhr.open('GET', `/gameInfo/${gameId}?_=${Date.now()}`,true)
      xhr.open('GET', `/game?gameId=${gameId}&_=${Date.now()}`,true)
      // 传递参数
      xhr.send()
      // 绑定事件
      xhr.onreadystatechange = () => {
        if (xhr.readyState === 4) {
          const data = JSON.parse(xhr.responseText)
          for (const item in data.data) {
            const liNode = document.createElement('li')
            liNode.innerHTML = item + ':' + data.data[item]
            ulNode.appendChild(liNode)
          }
        }
      }
      return false
    }
  </script>
</body>

</html>